<style>
  .demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
  }

  .demo-upload-list img {
    width: 100%;
    height: 100%;
  }

  .demo-upload-list-cover {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, .6);
  }

  .demo-upload-list:hover .demo-upload-list-cover {
    display: block;
  }

  .demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
  }
</style>

<template>
  <div class="search-form-con">
    <Row type="flex" justify="space-between" style="margin-bottom: 24px;">
      <Col :span="2">
      <Button icon="plus" type="primary" @click="addArticleModal.show = true">添加文章</Button>
      </Col>
      <Form :model="form" inline>
        <FormItem>
          <Input v-model="form.word" placeholder="请输入关键字"/>

        </FormItem>
      </Form>
    </Row>


    <!-- 添加用户 -->
    <Modal v-model="addArticleModal.show" width="700" :mask-closable="false">

      <p slot="header" style="text-align:center">
        <Icon type="information-circled" style="margin-right: 5px;"></Icon>
        <span>添加文章</span>
      </p>

      <div>
        <Form :model="addArticleModal.form" label-position="left">
          <FormItem label="* 文章类型">
            <Select v-model="addArticleModal.form.type" style="width: 85%">
              <Option :value.num="1">公司简介</Option>
              <Option :value.num="2">设计团队</Option>
              <Option :value.num="3">联系方式</Option>
            </Select>
          </FormItem>
          <FormItem label="* 文章标题">
            <Input v-model="addArticleModal.form.title" placeholder="请输入文章标题" style="width: 85%"/>
          </FormItem>
          <FormItem label="* 封面图片">
            <div class="demo-upload-list" v-for="item in uploadList">
              <template v-if="item.status === 'finished'">
                <img  :src="item.url">
                <div class="demo-upload-list-cover">
                  <Icon type="ios-eye-outline" @click="handleView(item.url)"></Icon>
                  <Icon type="ios-trash-outline" @click="handleRemove(item)"></Icon>
                </div>
              </template>
              <template v-else>
                <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
              </template>
            </div>
            <Upload
              name="upfile"
              :show-upload-list="false"
              :default-file-list="defaultUploadList"
              :on-success="handleSuccess"
              :format="['jpg','jpeg','png']"
              :max-size="5120"
              :on-format-error="handleFormatError"
              :on-exceeded-size="handleMaxSize"
              :before-upload="handleBeforeUpload"
              type="drag"
              action="//updesignsz.com:8999/projectsImage"
              style="display: inline-block;width:58px;">
              <div style="width: 58px;height:58px;line-height: 58px;">
                <Icon type="camera" size="20"></Icon>
              </div>
            </Upload>
            <Modal title="查看图片" :transfer="false"  v-model="visibleModal.show" style="width: 500px;">
              <img :src="imgName" style="width: 100%">
            </Modal>
          </FormItem>
          <FormItem label="* 文章内容">
            <br/>
            <div id="wangeditor">
              <div ref="editorElem" style="text-align:left"></div>
            </div>
          </FormItem>
        </Form>
      </div>

      <div slot="footer">
        <Button type="primary" :loading="addArticleModal.loading" @click="handleAddArticle(addArticleModal.form)"
                long>
          <span v-if="!addArticleModal.loading">添加文章</span>
          <span v-else>请求提交中</span>
        </Button>
      </div>
    </Modal>
  </div>
</template>

<script>
  import {mapState, mapActions} from 'vuex'
  import E from "wangeditor";

  export default {
    name: 'ArticleViewHeadTool',
    data() {
      return {
        editor: null,
        editorContent: '',
        uploadList: [],
        defaultUploadList: [],
        imgName: '',
        visibleModal: {
          show:false
        },
        form: {
          mode: 1,
          word: ''
        },
        // 添加文章模态框
        addArticleModal: {
          show: false,
          form: {
            title: '',
            type: '',
            cover: '',
            content: '',
            releaseDate: ''
          },
          loading: false
        }
      }
    },
    mounted() {
      this.editor = new E(this.$refs.editorElem);
      this.editor.customConfig.uploadImgServer = 'http://updesignsz.com:8999/uploadImage';
      this.editor.customConfig.uploadFileName = 'upfile';
      this.editor.customConfig.uploadImgTimeout = 100000000;
      // 编辑器的事件，每次改变会获取其html内容
      this.editor.customConfig.onchange = html => {
        this.editorContent = html;
//        this.catchData(this.editorContent); // 把这个html通过catchData的方法传入父组件
      };
      this.editor.customConfig.menus = [
        // 菜单配置
        'head', // 标题
        'bold', // 粗体
        'fontSize', // 字号
        'fontName', // 字体
        'italic', // 斜体
        'underline', // 下划线
        'strikeThrough', // 删除线
        'foreColor', // 文字颜色
        'backColor', // 背景颜色
        'link', // 插入链接
        'list', // 列表
        'justify', // 对齐方式
        'quote', // 引用
        'emoticon', // 表情
        'image', // 插入图片
        'table', // 表格
        'code', // 插入代码
        'undo', // 撤销
        'redo' // 重复
      ];
      this.editor.create();
    },
    watch: {
      'form.word': function (curr) {
        this.$emit('on-search-article', this.form)
      },
    },
    methods: {
      handleAddArticle(form) {
        this.addArticleModal.loading = true;
        var cover = '';
        for (var i = 0; i < this.uploadList.length; i++) {
          cover += this.uploadList[i].url;
        }
        form.cover = cover;
        form.content = this.editorContent;
        this.$emit('on-add-article', form, (status) => {
          if (status) {
            this.addArticleModal.show = false
            Object.assign(this.$data.addArticleModal.form, this.$options.data().addArticleModal.form)
          }
          this.addArticleModal.loading = false;
        });
      },
      handleView(name) {
        this.imgName = name;
        this.visibleModal.show = true;
      },
      handleRemove(file) {
//         从 upload 实例删除数据
        this.uploadList.splice(this.uploadList.indexOf(file), 1)
      },
      handleSuccess(res, file) {
        file.url = res.data.url;
        file.name = res.data.name;
        this.uploadList.push(file);
      },
      handleFormatError(file) {
        this.$Notice.warning({
          title: '文件格式不正确',
          desc: '文件 ' + file.name + ' 格式不正确，请上传 jpg 或 png 格式的图片。'
        });
      },
      handleMaxSize(file) {
        this.$Notice.warning({
          title: '超出文件大小限制',
          desc: '文件 ' + file.name + ' 太大，不能超过 2M。'
        });
      },
      handleBeforeUpload() {
        const check = this.uploadList.length < 1;
        if (!check) {
          this.$Notice.warning({
            title: '最多只能上传 1 张图片。'
          });
        }
        return check;
      }
    }
  }
</script>
